import React, { FC, Fragment, useState, useEffect } from 'react';
import style from './index.less';
import { Avatar, Button, Divider, Tag } from 'antd';
import { GithubOutlined, IdcardOutlined, ToolOutlined, HourglassOutlined } from '@ant-design/icons';
import {
  getCurrentUser,
  getCommunity,
  getCommunityRank,
  getCommunityAttention,
  saveCommunityAttention
} from './service';
import { add } from 'lodash';

interface Props {}
const Header: FC<Props> = () => {
  const [user_id, setUserId] = useState(localStorage.getItem('user_id') || '');
  const username = localStorage.getItem('username');
  const [userInfo, setUserInfo] = useState({});
  const [boxTitle, setBoxTitle] = useState([]);
  const getCommunityData = async () => {
    const { data } = await getCommunity({});
    await getAttention(data);
  };
  const getAttention = async (boxTitle: any) => {
    console.log(boxTitle, '111');
    const { data } = await getCommunityAttention({ user_id });
    const dataList = data.map(item => Number(item.community_id));
    boxTitle.map(item => {
      if (dataList.indexOf(item.id) > -1) {
        item.attention = true;
      } else {
        item.attention = false;
      }
      return item;
    });
    setBoxTitle(boxTitle);
  };
  const saveComAttention = (community_name: string, community_id: string) => {
    saveCommunityAttention({ user_id, username, community_name, community_id });
    getCommunityData();
  };
  useEffect(() => {
    getCommunityData();
  }, []);
  // const boxTitle = [
  //   {
  //     id: 1,
  //     name: '前端',
  //     remark: '从PC到移动屏幕上呈现的一切都由web前端实现',
  //   },
  //   {
  //     id: 2,
  //     name: '后端',
  //     remark: '负责数据提供，熟悉后端流程',
  //   },
  //   {
  //     id: 3,
  //     name: '人工智能',
  //     remark: '了解实质，生产出新的能以人类智能相似的智能机器',
  //   },
  //   {
  //     id: 4,
  //     name: '机器学习',
  //     remark: '研究计算机模拟或实现人类的行为，以获取新的技能，',
  //   },
  //   {
  //     id: 5,
  //     name: 'Python',
  //     remark: '提供了高效的高级数据结构，简单有效地面向对象编',
  //   },
  // ];
  const genres = [
    {
      id: 1,
      name: '前端',
    },
    {
      id: 2,
      name: '后端',
    },
    {
      id: 3,
      name: 'Python',
    },
    {
      id: 4,
      name: '机器学习',
    },
    {
      id: 5,
      name: '人工智能',
    },
  ];

  // 关注按钮

  //   const add(val: any){
  //     console.log(val)
  //     getCommunity({user_id:user_id}).then((res)=>{
  //       console.log(res)
  //   })
  // }

  // 排行榜
  const [dicussRank, setdicussRank] = useState({});
  const getRank = () => {
    getCommunityRank({}).then(res => {
      console.log(res);
      setdicussRank(res.data);
    });
  };
  return (
    <div className={style.container}>
      {/* 左侧 */}
      <div className={style.left}>
        {boxTitle.map((item, index) => (
          <div className={style.box}>
            <div className={style.content_top} key={index}>
              <div className={style.name}>{item.community_name}</div>
              <Button
                type="primary"
                className={style.add}
                onClick={() => {
                  saveComAttention(item.community_name, item.id);
                }}
                disabled={Boolean(item.attention)}
              >
                {/* +{'关注' ? '关注' : '已关注'} */}
                {item.attention ? '已关注' : '关注'}
                {item.attention}
              </Button>
            </div>

            <div className={style.remark}>{item.community_detail}</div>
          </div>
        ))}
      </div>
      {/* 右侧 */}
      <div className={style.right}>
        {/* <div className={style.box}>
          <span style={{fontSize:'20px',fontWeight:'bold'}}>热度排行榜</span>
        </div> */}
        <div className={style.box}>
          <div className={style.title}>最热社区排行榜</div>
          {genres.map((item, index) => (
            <div className={style.genre}>
              <div className={style.con}>
                <div className={style.genrenumber}>{item.id}.</div>
                <div className={style.genrename}>{item.name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Header;
